<template>
  <div>
    <!-- DraggableContainer 拖拽容器 -->
<DraggableContainer :referenceLineColor="'white'">
    <v-scale-screen width="1920" height="1080">
    <dv-full-screen-container style="background:rgb(2,19,49); background-size:100% 100%;" >
          <BorderBox11 title="顺丰数据中心">
            <div class="angry-grid">
       
            <div id="item-0">
              <!-- 移动容器 -->
        

                        <my-map></my-map>
          
            </div>
            <div id="item-1">
                  <Vue3DraggableResizable
                  :initW="400"
                  :initH="300"
                  :draggable="true"
                  :resizable="true"
                  :parent="true"
                >
                 <bar-chart></bar-chart>
                </Vue3DraggableResizable>
            </div>
            <div id="item-2">&nbsp;</div>
            <div id="item-3">&nbsp;</div>
            <div id="item-4">&nbsp;</div>
            <div id="item-5">&nbsp;</div>
            <div id="item-6">&nbsp;</div>
          </div>
    
          </BorderBox11>
       </dv-full-screen-container>
    </v-scale-screen>
    </DraggableContainer>
   </div>

</template>   
<script setup>
  import AdaptiveView from '../../components/AdaptiveView.vue'
    import {BorderBox11 } from '@kjgl77/datav-vue3'
    import barChart from '../charts/barChart.vue'
    import myMap from '../map/index.vue'
      import { VueDraggableNext } from 'vue-draggable-next'

</script>

<style lang="scss">
.angry-grid {

   display: grid; 
  padding: 60px;
   grid-template-rows: 1fr 1fr 1fr;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   
   gap: 10px;
   height: 100%;   
}
  
#item-0 {

   background-color: #BB7757; 
   grid-row-start: 1;
   grid-column-start: 2;

   grid-row-end: 4;
   grid-column-end: 4;
   
}
#item-1 {

   background-color: #9DB979; 
   grid-row-start: 1;
   grid-column-start: 1;

   grid-row-end: 2;
   grid-column-end: 2;
   
}
#item-2 {

   background-color: #99E7BD; 
   grid-row-start: 2;
   grid-column-start: 1;

   grid-row-end: 3;
   grid-column-end: 2;
   
}
#item-3 {

   background-color: #BC5896; 
   grid-row-start: 3;
   grid-column-start: 1;

   grid-row-end: 4;
   grid-column-end: 2;
   
}
#item-4 {

   background-color: #759C59; 
   grid-row-start: 3;
   grid-column-start: 4;

   grid-row-end: 4;
   grid-column-end: 5;
   
}
#item-5 {

   background-color: #75E5D9; 
   grid-row-start: 2;
   grid-column-start: 4;

   grid-row-end: 3;
   grid-column-end: 5;
   
}
#item-6 {

   background-color: #ED8A5D; 
   grid-row-start: 1;
   grid-column-start: 4;

   grid-row-end: 2;
   grid-column-end: 5;
   
}

</style>